<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>支付记录</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/pay_record.css">
</head>

<body>
	<div class="header">
		<div class="header_title">支付记录</div>
		<a onclick="history.back()">
			<img src="image/return.png" alt="" class="return">
		</a>
	</div>
	<div style="height: 40px;"></div>
	<div class="records" id="vue-root">
		<div class="record" v-for="item in list" :key="item.id">
			<div class="pay-term">
				<div class="pay-title" v-text="item.serviceName"></div>
				<div class="pay-time" v-text="item.time"></div>
			</div>
			<div class="pay-info">
				<div class="pay-amount"><span v-text="item.fee/100"></span>元</div>
				<div class="way"><span v-text="['微信','支付宝','线下'][item.way]"></span>支付</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>


	<script>
		var app = new Vue({
			el: '#vue-root',
			data: {
				list: []
			},
			created: function () {
				axios.get('/s/pay/list').then(function (res) {
					this.list = res.data;
				}.bind(this));
			}
		});
	</script>

</body>

</html>